<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂反馈分享</title>
    <link rel="stylesheet" href="../../teacher.css">
</head>
<body>
    <div class="layout">
        <main class="content" style="padding-top:24px;">
            <div class="card">
                <div class="card-header" id="shareTitle">课堂反馈</div>
                <div class="card-body">
                    <div id="shareInfo" class="message">加载中...</div>
                    <div id="shareContent" style="display:none;">
                        <div class="list" id="feedbackItems"></div>
                        <div id="imgGallery" class="gallery" style="margin-top:12px;"></div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 轻量 query 解析
        function getQueryParam(key){
            try{ const u=new URL(location.href); return u.searchParams.get(key); }
            catch(e){ const q=location.search.slice(1).split('&'); for(const p of q){const [k,v]=(p||'').split('='); if(decodeURIComponent(k||'')===key) return decodeURIComponent(v||'');} return null; }
        }

        document.addEventListener('DOMContentLoaded', async function(){
            const sid = getQueryParam('sid');
            const name = getQueryParam('name');
            const title = document.getElementById('shareTitle');
            if(name){ title.textContent = name + '的课堂反馈'; }

            const info = document.getElementById('shareInfo');
            const wrap = document.getElementById('shareContent');
            const listEl = document.getElementById('feedbackItems');
            const gallery = document.getElementById('imgGallery');

            if(!sid){ info.className='message error'; info.textContent='链接参数缺失'; return; }

            // 预留：未来可改为从后端拉取 GET /share/feedback/detail?sid=...
            try {
                const cached = sessionStorage.getItem('previewFeedback_'+sid);
                if(!cached){
                    info.className='message';
                    info.textContent='后端未接入分享接口，当前展示占位内容';
                    return;
                }
                const data = JSON.parse(cached);
                info.style.display='none';
                wrap.style.display='block';

                // 文本
                const div = document.createElement('div');
                div.className = 'item';
                const when = (data.time||'').toString().replace('T',' ').slice(0,16);
                const course = data.courseName || data.courseText || '课程';
                div.innerHTML = `<div class="name">${when} · ${course}</div><div class="desc">${(data.content||'')}</div>`;
                listEl.appendChild(div);

                // 图片
                (data.photos||[]).forEach(url=>{
                    const img = document.createElement('img');
                    img.src = url; img.style.width='120px'; img.style.height='120px'; img.style.objectFit='cover';
                    gallery.appendChild(img);
                });
            } catch(err){
                info.className='message error';
                info.textContent='加载失败，请稍后再试';
            }
        });
    </script>
</body>
</html>


